<template>
  <div class="page-h5warp">
    <pk-scroll :loading="loading" :isEnd="isEnd" @scrolltolower="scrolltolower">
      <div class="page-h5warp-content pt-24">
        <div class="page-h5warp-itembox">
          <div class="page-h5warp-item" v-for="(item,index) in list" :key="index">
            <pk-good :data="item" @onCall="onCall(item)">
              <div class="mt-12 f-14 gray-color">
                同步至数字分身 <el-switch v-model="item.isTrue" :loading="item.loading" @change="onChange(item)"/>
              </div>
            </pk-good>
          </div> 
        </div>
      </div> 
    </pk-scroll>
    <div class="page-h5warp-footer">
      <div class="page-h5warp-footerbtn"  @click="createSpare" v-loading="cloading" element-loading-text="创建分身中...">
        <div class="page-h5warp-footerbtnicon"><el-icon size="20" color="#fff"><Plus /></el-icon></div>
        <div>创建我的分身</div>
      </div>
    </div>
    <createspare v-if="parseShow" :data="createUser" @updateSpare="updateSpare" @onClose="parseShow=false" :loading="loading"></createspare>
  </div>
</template>

<script setup>
  import { ref, onMounted  } from 'vue'
  import { agentGetMyList, generateChatLink, agentRelease, agentCreate, agentUpdate   } from '@/api/api'
  import pkGood from '@/components/pkui/pkgood/pkgood.vue'
  import pkScroll from '@/components/pkui/pkscroll/pkscroll.vue'
  import createspare from '@/components/createspare/createspare.vue'
  import { useSideStore } from '@/store/state'
  import { Plus } from '@element-plus/icons-vue'
  import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
  const counterStore = useSideStore()
  const userinfo = ref({})
  const loading = ref(false)
  const cloading = ref(false)
  const parseShow = ref(false)
  const createUser = ref({})
  const isEnd = ref(false)
  const list = ref([])
  const page = ref(1)

  const getList = () => {
    if (isEnd.value) {
      return
    }
    loading.value = true
    agentGetMyList({
      page: page.value
    }).then(res => {
      setTimeout(() => {
        loading.value = false
        if (res.data.list.length == 0) {
          isEnd.value = true
        } 
        if(res.data.list.length > 0){
          list.value = list.value.concat(res.data.list.map(item => {
            return {
              ...item,
              isTrue: item.is_public == 1 ? true : false,
              loading: false
            }
          }))
        } 
      }, 500)
    }).catch(() => {
      loading.value = false
    })
  } 

  // 创建分身
  const createSpare = () => {
    userinfo.value = getKeyUserInfo() ? JSON.parse(getKeyUserInfo()) : {}
    if (!userinfo.value.attachment) {
      ElMessage('简历没有上传')
      return
    }
    cloading.value = true
    agentCreate().then(res => {
      cloading.value = false
      if (res.code === 1000) { 
        createUser.value = res.data
        parseShow.value = true
      } 
    }).catch(() => {
      cloading.value = false
    })
  }

  const updateSpare = async (data) => {
    loading.value = true
    agentUpdate(data).then(res => {
      isEnd.value = false
      loading.value = false
      parseShow.value = false
      page.value = 1
      list.value = []
      getList()
    }).catch(err => {
      loading.value = false
    })
  }

  const onChange = (e) => {
    e.loading = true
    let flag = e.is_public == 1 ? 0 : 1
    agentRelease({
      agent_id: e.agent_id,
      is_public: flag
    }).then(res => {
      e.loading = false
      e.is_public = flag
      e.isTrue = flag==1 ? true : false 
      // page.value = 1
      // list.value = []
      // getList()
    }).catch(err => {
      e.loading = false 
    })
  }

  const onCall = (e) => {
    if (!getToken()) {
      counterStore.SETLOGINSHOW(true)
      return
    } 
    generateChatLink({
      agent_id: e.agent_id,
      is_public: 1
    }).then(res => {
      window.open(res.data, "_blank")
    })
  }

  const scrolltolower = () => {
    page.value = page.value + 1
    getList()
  }

  onMounted(() => {
    list.value = [] 
    getList() 
  })
</script>

<style lang="scss" scoped>
.page-h5warp{
  height: 100vh;
  overflow: hidden;
  position: relative;
  &-content{
   padding-bottom: 40px;
  }
  &-itembox{
    margin: 0 16px
  }
  &-item{
    margin-bottom: 12px
  }
  &-footer{
    position: fixed;
    bottom:0;
    z-index: 999;
    left: 0;
    right: 0;
  }
  &-footerbtn{
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #0057ff;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
  }
  &-footerbtnicon{
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
}

</style>